<template>
  <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="destroyOnClose" :title="title" :visible.sync="staffDialog" append-to-body width="80%"
    @close="staffClose">
    <el-row style="padding:10px 0 ;">
      <el-col :span="9" style="padding-right: 10px">
        <div style="height:500px;">
          <el-scrollbar style="height:100%">
            <el-tree ref="tree" :data="data" :default-expanded-keys="idArr" :expand-on-click-node="false" :props="defaultProps" class="left-tree" highlight-current
              @node-click="handleNodeClick">
            </el-tree>
          </el-scrollbar>
        </div>
      </el-col>
      <el-col :span="8">
        <el-input v-model="query.name" clearable placeholder="请输入姓名" suffix-icon="el-icon-search" @change="searchStaff" style="width: 90%"></el-input>
        <div style="height:480px;">
          <el-scrollbar style="height:100%">
            <el-checkbox-group v-model="staffList" @change="selectStaff">
              <el-checkbox v-for="item in dialogList2" :key="item.userId" :label="`${item.userId}:${item.name}`" style="width: 90%; margin-top: 15px">{{ item.name }}<span
                  style="padding-left:2px;">({{ item.userId }})</span></el-checkbox>
            </el-checkbox-group>

          </el-scrollbar>
        </div>
      </el-col>
      <el-col :span="7" style="padding-left: 10px">
        <div style="height:500px;">
          <el-scrollbar style="height:100%">
            <el-row style="margin-bottom: 10px">选择人员列表</el-row>
            <el-row v-for="(item, index) in dialogList3" :key="index" class="isSelectedRows">
              <div style="display: inline-block">
                <i class="el-icon-user-solid"></i>
                {{ item.name }}
                <span style="padding-left:2px;">({{ item.userId }})</span>
              </div>
              <i class="el-icon-circle-close isSelectedDelete" title="取消选择" @click="cancle(item.userId)"></i>
            </el-row>

          </el-scrollbar>
        </div>
      </el-col>
    </el-row>

    <el-button class="dialog-btn" type="primary" @click="staffConfirm">确定
    </el-button>
  </el-dialog>
</template>

<script>
import * as api from '@/api/organization'

export default {
  props: {
    title: {
      type: String,
      default: '新增员工',
    },
    //是否筛选未激活账号
    isActive: {
      type: String,
      default: '',
    },
    // 添加标签显隐
    visible: {
      type: Boolean,
      default: false,
    },
    isDisabled: {
      type: Boolean,
      default: false,
    },
    destroyOnClose: {
      type: Boolean,
      default: true,
    },
    selectList: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    staffDialog: {
      get() {
        console.log(this.visible, 'visible', '@@@@@@@@@@@')
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      },
    },
  },
  mounted() {
    this.getTree()
  },
  watch: {
    staffDialog: {
      handler(val) {
        if (val) {
          console.log(this.selectList, 'selectList', '@!!!!!!!@@@@@@@!!!!!!!!')
          this.selectList.map((item) => {
            return (item.name = item.userName)
          })
          this.dialogList3 = this.selectList
          this.staffList = this.selectList.map((item) => {
            return `${item.userId}:${item.name}`
          })
        }
      },
    },
  },
  data() {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      idArr: [],
      query: {
        name: '',
        department: '',
        pageNum: 1,
        pageSize: 99999,
        isActivate: '',
      },
      // name:'',
      staffList: [],
      dialogList2: [],
      dialogList3: [],
      userList: [],
      scrmPersonSopUserRels: [], // 执行员工,
    }
  },
  methods: {
    // 弹窗的关闭
    staffClose() {
      this.staffDialog = false
    },
    //通过部门查询员工
    handleNodeClick(data) {
      this.query.department = data.id == 1 ? '' : data.id
      this.getList(1)
    },
    // 获取员工数据
    getTree() {
      api.getTree().then((res) => {
        this.data = this.handleTree(res.data)
        this.data.map((item) => {
          return (item.userName = item.name)
        })
        console.log(this.data, 'data', '数据')
      })
    },
    searchStaff() {
      this.getList()
    },
    selectStaff(e) {
      this.dialogList3 = e.map((item) => {
        return { userId: item.split(':')[0], name: item.split(':')[1] }
      })
    },
    getList() {
      this.query.isActivate = this.isActive || '1'
      api
        .getList(this.query)
        .then(({ rows }) => {
          this.dialogList2 = rows
          console.log(this.dialogList2, 'dialoglist2', '数组列')
        })
        .catch(() => {})
    },
    // 取消选择
    cancle(key) {
      this.$refs.tree.setChecked(key, false)
      let index = this.dialogList3.findIndex((i) => i.userId === key)
      index > -1 && this.dialogList3.splice(index, 1)
      let order = this.staffList.findIndex((i) => i.split(':')[0] === key)
      order > -1 && this.staffList.splice(order, 1)
    },
    // 弹窗的确认
    staffConfirm() {
      this.staffDialog = false
      this.dialogList3.forEach((item) => {
        return (item.userName = item.name)
      })
      this.$emit('confirm', this.dialogList3)
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/base.scss';

::v-deep .el-scrollbar__bar.is-horizontal {
  height: 0 !important;
}

.isSelectedRows {
  font-size: 14px;
  margin-bottom: 15px;
}

.isSelectedDelete {
  float: right;
  margin-right: 4px;
}

.isSelectedDelete:hover {
  color: #082aff;
}
</style>
